<template>
  <div>
    <div style="user-select: none;" v-if="this.$route.meta.hidden">
      <header class="header">
        <div class="title">
          <img src="@/assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
          <div>巡查排查</div>
        </div>
      </header>
      <div class="menPhis-main">
        <div class="men-box" @click="shows = true">
          <div class="men-title">{{ tkCategory.name !== '' ? tkCategory.name : '请选择类别' }}</div>
          <img src="@/assets/images/app_x.png" alt="" class="img">
        </div>
        <div
          class="men-boxs"
          :style="tkCategory.tkListB.length <= 2 ? '' : 'justify-content: end;'"
          v-if="tkIds !== -1 && tkCategory.tkListB.length > 0">
          <div
            class="men-boxs-data"
            :class="checkItem.indexOf(item.id) !== -1 ? 'hiddenDanger' : ''"
            v-for="(item, index) in tkCategory.tkListB"
            :key="index"
            @click="changeData(4, item.id)">{{ item.mc }}</div>
        </div>
        <div
          class="men-boxs"
          v-if="tkIds !== -1">
          <div
            class="men-boxs-data"
            :class="hiddenDanger === 1 ? 'hiddenDanger' : ''"
            @click="changeData(3, 1)">隐患</div>
          <div
            class="men-boxs-data"
            :class="hiddenDanger === 99 ? 'hiddenDanger' : ''"
            @click="changeData(3, 99)">管控措施</div>
        </div>
        <!--        <div class="men-box" @click="popupShow = true">-->
        <!--          <div class="men-title">人数：{{ peopleNum }}</div>-->
        <!--          <img src="@/assets/images/app_x.png" alt="" class="img">-->
        <!--        </div>-->
        <div class="men-box" v-if="communityName !== ''">
          <div class="men-title men-title-space">检查对象：{{ communityName }}</div>
        </div>
        <div class="men-box" v-show="zhuanname === ''">
          <div class="men-title">专项任务</div>
          <img src="@/assets/images/icon-xc-add.png" alt="" class="imgs" @click="clickOverlay">
        </div>
        <div
          v-show="zhuanname!==''"
          :style="$route.query.id && zhuanname !== '' ? 'pointer-events: none' : ''">
          <div class="men-box" @click="clickOverlay">
            <div class="list-box">
              <div class="dian">专项任务-</div>
              <div class="yhd">{{ zhuanname }}</div>
            </div>
          </div>
          <div class="men-box" @click="clickOverlay">
            <div class="list-box">
              <div class="dian">具体任务-</div>
              <div class="yhd">{{ juname }}</div>
            </div>
          </div>
        </div>
        <div class="app-men-box">
          <div class="men-box" v-if="!Districts && !Streets && !communitys">
            <div class="men-title">参加人员</div>
            <img @click="personshow" src="@/assets/images/icon-xc-add.png" alt="" class="imgs">
          </div>
          <div class="men-box" v-if="Districts" @click="personshow">
            <div class="list-box">
              <div class="dian">参加领导-</div>
              <div class="yhd">{{ Districts }}</div>
            </div>
          </div>
          <div class="men-box" v-if="Streets" @click="personshow">
            <div class="list-box">
              <div class="dian">街道部门-</div>
              <div class="yhd">{{ Streets }}</div>
            </div>
          </div>
          <div class="men-box" v-if="communitys" @click="personshow">
            <div class="list-box">
              <div class="dian">社区-</div>
              <div class="yhd">{{ communitys }}</div>
            </div>
          </div>
        </div>
        <div class="contant">
          <div class="security">
            <div class="boxitem">
              <textarea placeholder="请描述内容(500字以内)" id="txtbxnr" v-model="txtbxnr" maxlength="500" ref="count"></textarea>
            </div>
            <div class="ly_tc">
              <img src="@/assets/images/ly_dt.gif" alt="" />
            </div>
            <div class="yuyin_list">
              <div class="ly_start">
                <span class="ly">
                  <img src="@/assets/images/mkf.png" />
                  <span>按住说话</span>
                </span>
              </div>
              <div class="ly_play" id="ly_play" data-url="">
                <div>
                <span class="ly">
                  <img src="@/assets/images/play.png" />
                  <span class="ly_s">{{ contractime !== "" ? contractime : '0"' }}</span>
                </span>
                  <img class="del_ly" src="@/assets/images/delete.png" @click="clickDelete" />
                  <img class="zhuan" src="@/assets/images/zhuan.png" />
                </div>
              </div>
              <div style="display: flex;align-items: center">
                <img
                  :style="communityMap !== null && JSON.stringify(communityData).length <= 2 ? 'filter: grayscale(100%);pointer-events: none;' : ''"
                  src="@/assets/images/pc-3-000000_07.gif"
                  @click="jumpZGFList(1)"
                  style="height: 30px;padding: 0 5px">
                <img
                  :style="communityMap === null && JSON.stringify(communityData).length > 2 ? 'filter: grayscale(100%);pointer-events: none;' : ''"
                  src="@/assets/images/pc-3-000000_09.gif"
                  @click="jumpZGFList(2)"
                  style="height: 30px;padding: 0 5px">
              </div>
            </div>
            <ul class="img-box img_upload">
              <div class="img-item radius-m" @click="showPop"></div>
            </ul>
            <ul class="img-box imgs_ul" v-show="list_img.length>0">
              <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) in list_img"
                  :key="i">
                <div class="img-content">
                  <img class="img-src img_tu" :src="show_path + obj.imgs" />
                  <div class="img-group">
                    <div class="img-btn">
                      <div class="del-btn" @click.stop="del(i,'img')">X</div>
                    </div>
                    <div class="img-btn">
                      <div class="desc-btn" @click.stop="showDesc(i)">A</div>
                    </div>
                  </div>
                </div>
                <input
                  class="img-desc"
                  type="text"
                  @click.stop="stopMP"
                  @input="changeS(i)"
                  :style="i === number ? 'display: block;' : ''"
                  placeholder="请输入描述"
                  v-model="imgText[i]" />
              </li>
            </ul>
            <ul class="video-list" v-for="(obj,i) of list_mv">
              <video controls>
                <source :src="show_path+obj.video" type="video/mp4">
                <source :src="show_path+obj.video" type="video/ogg">
                您的浏览器不支持Video标签。
              </video>
              <div class="del" @click.stop="del(i,'mv')"><img src="@/assets/images/delete.png" /></div>
            </ul>
          </div>
          <div style="box-sizing: border-box;padding: 10px;background-color: white">
            <div class="button" ref="button" @click="submit">确认并签名</div>
          </div>
        </div>
        <div class="tanbox" v-show="show">
          <div class="conte">
            <div class="tishi">
              <div>提示</div>
              <img src="@/assets/images/false.png" @click="show = false" />
            </div>
            <div class="tk-main">
              <div class="shangc">{{ names }}</div>
              <div class="queding" @click="show = false">确定</div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="popupShow"  position="bottom">
        <van-picker
          id="van-datetime-picker"
          :columns="currentDate"
          :default-index="peopleNum - 1"
          show-toolbar
          type="date"
          @cancel="popupShow = false"
          @confirm="confirm"
        />
      </van-popup>
      <van-popup v-model="btm_show" position="bottom">
        <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
        <div class="btm_tk_item" @click="pz">拍照</div>
        <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
        <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
      </van-popup>
      <div class="titles-modal" v-if="shows" @click="shows = false"></div>
      <div class="titles-box titles-boxs" style="z-index: 1000" v-if="shows !== false">
        <div class="title-left">
          <div
            class="titles-box-cont"
            :style="index === tkId ? 'color: #007aff;' : ''"
            v-for="(item, index) in tkList"
            :key="index"
            @click="changeData(1, index)">{{ item.mc }}</div>
        </div>
        <div class="title-right" style="flex: 1">
          <div
            class="titles-box-cont"
            :style="index === tkIds && tkCategory.id === tkList[tkId].id ? 'color: #007aff;' : ''"
            style="justify-content: flex-start"
            v-for="(item, index) in tkList[tkId].childA"
            :key="index" @click="changeData(2,index)">{{ item.mc }}</div>
        </div>
      </div>
      <!-- 专项任务弹框 -->
      <van-popup v-model="showrenwu" class="van-popups" :close-on-click-overlay="false">
        <div class="contt1">
          <div class="tan_title">
            <div>专项任务</div>
            <img @click="showrenwu=false" src="@/assets/images/false.png" />
          </div>
          <div class="main zxrw">
            <div v-for="(v,index) of specialList" class="zxrw_fj" :key="index">
              <div @click="xuanzhe($event)" class="tanlist">
                <div class="">{{v.name}}</div>
              </div>
              <div class="jtrw dply">
                <div
                  class="tanlist tanchild"
                  :class="{actives:x.xuanz}"
                  v-for="(x,item) of v.list" :key="item"
                  @click="xuanzhe2(x,index,item)"
                  :data-id="v.id" :id="x.id"
                  :data-name="v.name"
                  :name="x.name" >{{x.name}}</div>
              </div>
            </div>
          </div>
          <div class="tanyes" @click="queding">确定</div>
        </div>
      </van-popup>
      <!-- 参与人员弹框 -->
      <van-popup v-model="persontanbox" class="van-popups" :close-on-click-overlay="false">
        <div class="contt1">
          <div class="tan_title">
            <div>参加人员</div>
            <img @click="personyes" src="@/assets/images/false.png" />
          </div>
          <div class="main">
            <div class="personum">
              <div>人数</div>
              <input
                type="number"
                v-model="peopleNum"
                placeholder="请输入" />
            </div>
            <div class="boxg">
              <div class="personum" @click="btn($event)">
                <div>区级</div>
              </div>
              <div class="close_flex_next dply">
                <div
                  class="cesjiedao"
                  :class="personnel.indexOf(item.id) !== -1 ? 'actives' : ''"
                  v-for="(item, index) in personnelData.diStriCtLevel"
                  :key="index"
                  @click="clickDistrict(item)">{{ item.username }}</div>
                <div class="cesjiedao">
                  <input @input="inputjy(1)" class="input" v-model="districtText" placeholder="请输入" />
                </div>
              </div>
            </div>
            <div class="boxg" v-show="lev === 1 || lev === 2">
              <div class="personum" @click="btn($event)">
                <div>街道/部门</div>
              </div>
              <div class="close_flex_next dply">
                <div
                  class="cesjiedao"
                  :class="personnel.indexOf(item.id) !== -1 ? 'actives' : ''"
                  v-for="(item, index) in personnelData.dePartMent"
                  :key="index"
                  @click="clickStreet(item)">{{ item.username }}</div>
                <div class="cesjiedao">
                  <input @input="inputjy(2)" class="input" v-model="streetText" placeholder="请输入" />
                </div>
              </div>
            </div>
            <div class="boxg" v-show="lev === 2 || (lev === 2 && (personnelData.levs !== 1 && personnelData.levs !== 100))">
              <div @click="btn($event)" class="personum">
                <div>社区</div>
              </div>
              <div class="close_flex_next dply">
                <div
                  class="cesjiedao"
                  :class="personnel.indexOf(item.id) !== -1 ? 'actives' : ''"
                  v-for="(item, index) in personnelData.community"
                  :key="index"
                  @click="clickCommunity(item)">{{ item.username }}</div>
                <div class="cesjiedao">
                  <input @input="inputjy(3)" class="input" v-model="communityText" placeholder="请输入" />
                </div>
              </div>
            </div>
          </div>
          <div class="tanyes" @click="personyes">确定</div>
        </div>
      </van-popup>
    </div>
    <router-view/>
  </div>
</template>

<script>
  import terminal from '@/assets/js/terminal';
  import { Toast } from 'vant';
  import upload from '@/assets/js/upload_vue';
  export default {
    name: "index",
    data () {
      return {
        currentDate: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //  人数数组
        peopleNum: null, //  人数
        number: null,
        category: [], //  请选择类别
        txtbxnr: '',  //  内容
        btm_show: false,
        popupShow: false,
        list_img: [],
        imgText: [],
        show_path: null,
        list_mv: [],
        id: 0,
        details: {},
        patrolId: 0,
        name: '',
        show: false,
        names: '',
        patrolData: {},
        detailData: {},
        terminal: false,
        shows: false,
        tkId: 0,
        tkIds: -1,
        tkCategory: {
          name: ''
        },
        tkList: [],
        contractime: '',
        hiddenDanger: 0,
        checkItem: [],
        userId: '',
        communityData: {},
        communityName: '',
        communityMap: {},
        NewInfoId: 0,
        text: '',
        zhuanname:'', // 专项任务
        juname:'',  //  具体任务
        renwuchuan: '',
        specialList: [],
        showrenwu: false,
        Districts: '', //  显示数组
        Streets: '', //  显示数组
        communitys: '', //  显示数组
        persontanbox: false, // 参与人员弹框
        personnelData: {
          dePartMent: []
        },
        lev: '',
        districtText: '',
        streetText: '',
        communityText: '',
        personnel: [],  //  所有人员
        district: [], //  选择的人员
        street: [], //  选择的人员
        community: [],  //  选择的人员
        District: [], //  显示数组
        Street: [], //  显示数组
        commonPersonnel: [],  //  传值
        commonPersonnelText:[],
      };
    },
    watch:{
      commonPersonnel() {
        if (this.commonPersonnel.length > 0) {
          this.peopleNum = this.commonPersonnel.length + this.commonPersonnelText.length
        } else {
          if (this.commonPersonnelText.length > 0) {
            this.peopleNum = this.commonPersonnelText.length;
          } else {
            this.peopleNum = null;
          }
        }
      },
      commonPersonnelText () {
        if (this.commonPersonnelText.length > 0) {
          this.peopleNum = this.commonPersonnel.length + this.commonPersonnelText.length
        } else {
          if (this.commonPersonnel.length > 0) {
            this.peopleNum = this.commonPersonnel.length;
          } else {
            this.peopleNum = null;
          }
        }
      },
      shows (item) {
        switch (item) {
          case true: document.body.style.overflowY = 'hidden';
            break;
          case false: document.body.style.overflowY = 'auto';
            break;
        }
      },
      $route (path) {
        this.$nextTick( _ => {
          this.ly();
          let a = JSON.parse(localStorage.getItem('ordinary_inspection'))
          if (a && path.path === '/ordinary_inspection') {
            if (a.dataUrl !== '') {
              this.contractime = a.dataUrlTime
              $(".ly_play").attr("data-url",this.show_path + a.dataUrl)
              $(".ly_start").hide(); //隐藏录音按钮
              $(".zhuan").show(); //显示zhuan
              $(".ly_play").show(); //显示录音播放
            }
          }
        })
        if (JSON.parse(localStorage.getItem('communityData'))) {
          this.communityData = JSON.parse(localStorage.getItem('communityData'));
          this.communityName = this.communityData.name + this.communityData.communityNameList.toString();
        }
        if (JSON.parse(localStorage.getItem('MapPosResult'))) {
          this.communityMap = JSON.parse(localStorage.getItem('MapPosResult'));
          this.communityName = this.communityMap.name;
        }
      }
    },
    mounted () {
      this.show_path = this.$global_msg.Url.hosts;
      this.terminal = terminal.terminals().android;
      this.communityMap = JSON.parse(localStorage.getItem('MapPosResult'))
      document.body.style.overflowY = 'auto';
      if (JSON.parse(localStorage.getItem('communityData'))) {
        this.communityData = JSON.parse(localStorage.getItem('communityData'));
        this.communityName = this.communityData.name + this.communityData.communityNameList.toString();
      }
      this.userId = localStorage.getItem('userId');
      this.queryDetails();
      this.querySpecial();
      this.ly();
      //切换后台
      document.addEventListener("pause", function(){
        this.$yy.stop();
      }, false);
    },
    destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    methods: {
      btn (e) {
        $(e.currentTarget).parents(".boxg").find(".close_flex_next").toggleClass("dply")
        $(e.currentTarget).parents(".boxg").siblings().find(".close_flex_next").addClass("dply")
      },
      inputjy(x) { //添加人员时输入框
        if(x==1){
          if(this.districtText!==''){
            this.districtText = this.districtText.replace(/[,|、]/g, '，');
          }
        }else if(x==2){
          if(this.streetText!==''){
            this.streetText = this.streetText.replace(/[,|、]/g, '，');
          }
        }else {
          if (this.communityText !== '') {
            this.streetText = this.streetText.replace(/[,|、]/g, '，');
          }
        }
      },
      //  点击区级人员
      clickDistrict (data) {
        let that = this
        let a = that.personnel;
        let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser},,,${data.id}`
        // let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser}`
        if (a.indexOf(data.id) === -1) {
          that.district.push(data.id);
          a.push(data.id);
          that.commonPersonnel.push(b);
          if (data.teamUser !== 0 || data.teamUser === null) {
            that.District.push(data.username);
          }
        } else {
          a.map((item, index) => {
            if (item === data.id) {
              a.splice(index, 1);
            }
          })
          if (data.teamUser !== 0 || data.teamUser === null) {
            that.District.map((item, index) => {
              if (item === data.username) {
                that.District.splice(index, 1);
              }
            })
          }
          that.district.map((item, index) => {
            if (item === data.username) {
              that.district.splice(index, 1)
            }
          })
          that.commonPersonnel.map((item, index) => {
            if (item === b) {
              that.commonPersonnel.splice(index, 1)
            }
          })
        }
      },
      //  点击街道人员
      clickStreet (data) {
        let a = this.personnel;
        let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser},,,${data.id}`
        // let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser}`
        if (a.indexOf(data.id) === -1) {
          this.street.push(data.username);
          a.push(data.id);
          this.commonPersonnel.push(b);
          if (data.teamUser !== 0 || data.teamUser === null) {
            this.Street.push(data.username);
          }
        } else {
          a.map((item, index) => {
            if (item === data.id) {
              a.splice(index, 1);
            }
          })
          if (data.teamUser !== 0 || data.teamUser === null) {
            this.Street.map((item, index) => {
              if (item === data.username) {
                this.Street.splice(index, 1);
              }
            })
          }
          this.street.map((item, index) => {
            if (item === data.username) {
              this.street.splice(index, 1)
            }
          })
          this.commonPersonnel.map((item, index) => {
            if (item === b) {
              this.commonPersonnel.splice(index, 1)
            }
          })
        }
      },
      //  点击社区人员
      clickCommunity (data) {
        let a = this.personnel;
        let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser},,,${data.id}`
        // let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser}`
        if (a.indexOf(data.id) === -1) {
          this.community.push(data.username);
          a.push(data.id);
          this.commonPersonnel.push(b);
        } else {
          a.map((item, index) => {
            if (item === data.id) {
              a.splice(index, 1);
            }
          })
          this.community.map((item, index) => {
            if (item === data.username) {
              this.community.splice(index, 1)
            }
          })
          this.commonPersonnel.map((item, index) => {
            if (item === b) {
              this.commonPersonnel.splice(index, 1)
            }
          })
        }
      },
      //  弹框关闭/确定
      personyes () {
        this.persontanbox = false;
        let qujiaddperson=[]
        var _this=this
        if (_this.districtText!== "") {
          _this.districtText.split('，').forEach((x)=>{
            let a = `null,,,0,,,${x},,,null,,,null`
            _this.commonPersonnelText.push(a)
            _this.District.push(x)
            qujiaddperson.push({addname:`0,,,${x}`})
          })
          _this.districtText=""
        }
        if (_this.streetText!== "") {
          _this.streetText.split('，').forEach((x)=>{
            let a = `null,,,1,,,${x},,,null,,,null`
            _this.commonPersonnelText.push(a)
            _this.Street.push(x)
            qujiaddperson.push({addname:`1,,,${x}`})
          })
          _this.streetText=""
        }
        if (_this.communityText!== "") {
          _this.communityText.split('，').forEach((x)=>{
            let a = `null,,,2,,,${x},,,null,,,null`
            _this.commonPersonnelText.push(a)
            _this.community.push(x)
            qujiaddperson.push({addname:`2,,,${x}`})
          })
          _this.communityText=""
        }
        var addpersonchuan=''
        qujiaddperson.forEach((v,index)=>{
          addpersonchuan+=':'+ v.addname
        })
        addpersonchuan = addpersonchuan.substring(1)
        this.axios.get(`${this.$global_msg.Url.host}/Xx/insertPersonnelLevel?patrolTroubleshootId=${-1}
        &newUserInfoVos=${addpersonchuan}&userId=${this.userId}&type=${0}`)
          .then(res => {
            this.personnel = this.personnel.concat(res.data.rows);
            _this.queryPersonnel()
          }).catch( e => terminal._error(e));
        _this.Districts = this.District.toString();
        _this.Streets = this.Street.toString();
        _this.communitys = this.community.toString();
      },
      personshow () {
        this.queryPersonnel();
        this.persontanbox = true;
      },
      // 获取参与人员列表
      queryPersonnel () {
        let params = {
          userId: this.userId,
        };
        let api = 'partroInspection/deploymentChoosePeople';
        this.axios.get(`${this.$global_msg.Url.host}/${api}`,
          { params }).then(res => {
          if (res.data.code === 200) {
            this.personnelData = res.data.rows;
            this.personnelData.dePartMent = this.personnelData.dePartMent.concat(this.personnelData.street)
            this.lev=res.data.rows.lev
          } else {
            Toast(res.data.msg || '获取数据失败,请刷新页面重试')
          }
        }).catch( e => terminal._error(e));
      },
      // 获取专项任务列表
      querySpecial () {
        let params = {
          userId: this.userId
        };
        this.axios.get(`${this.$global_msg.Url.host}/partroInspection/selectTask`,
          { params }).then(res => {
          this.specialList = res.data.rows.task;
        }).catch( e => terminal._error(e));
      },
      xuanzhe(e){//专项任务，下拉
        $(e.currentTarget).parents(".zxrw_fj").find(".jtrw").toggleClass("dply")
        $(e.currentTarget).parents(".zxrw_fj").siblings().find(".jtrw").addClass("dply")
      },
      queding(){//专项任务弹框确定按钮
        this.showrenwu=false
        let fid = []
        let did = []
        let fidname = []
        let didname = []
        let html=""
        let str=""
        $(".zxrw .actives").each(function(i, item) {
          fidname.push($(item).attr("data-name"))
          didname.push($(item).attr("name"))
          fid.push($(item).attr("data-id"))
          did.push({
            dataid: $(item).attr("data-id"),
            id: $(item).attr("id")
          })
        })
        fidname = [...new Set(fidname)]
        fid = [...new Set(fid)]
        for (let i of fid) {
          html += "|"
          for (let ii of did) {
            if (i == ii.dataid) {
              html += "," + ii.id
            }
          }
        }
        html = html.substring(1).split("|")
        for (let i = 0; i < fid.length; i++) {
          for (let ii = 0; ii < html.length; ii++) {
            if (i == ii) {
              str += "a" + fid[i] + "," + html[i]
            }
          }
        }
        str = str.substring(1)
        this.renwuchuan=str
        this.zhuanname = fidname.join()
        this.juname = didname.join()
        console.log(this.renwuchuan);
      },
      xuanzhe2 (x, index, item) {//专项任务选择
        var _this = this;
        var xuanz = x.xuanz ? false : true;
        _this.specialList[index].list[item].xuanz = xuanz;
        _this.$forceUpdate();
      },
      //  专项任务弹框
      clickOverlay () {
        this.showrenwu = true
      },
      changeS (index) {
        this.imgText[index] = this.imgText[index].replace(/,/, '，');
      },
      stopMP () {},
      //  存缓存
      Save () {
        let a = {
          dataUrl: $(".ly_play").attr("data-url"),  //  语音路径
          dataUrlTime: $(".ly_s").html(),  //  语音秒数
        }
        localStorage.setItem('ordinary_inspection', JSON.stringify(a));
      },
      //  类别数据展示
      changeData (id, index) {
        switch (id) {
          case 1:
            this.tkId = index;
            break;
          case 2:
            this.tkIds = index;
            this.tkCategory = {
              name: `${this.tkList[this.tkId].mc}-${this.tkList[this.tkId].childA[this.tkIds].mc}`,
              id: this.tkList[this.tkId].id,
              ids: this.tkList[this.tkId].childA[this.tkIds].id,
              tkListB: this.tkList[this.tkId].childA[this.tkIds].childB
            }
            this.checkItem = [];
            this.shows = false;
            break;
          case 3:
            this.hiddenDanger = index;
            break;
          case 4:
            if (this.checkItem.indexOf(index) === -1) {
              this.checkItem.push(index)
            } else {
              this.checkItem.splice(this.checkItem.indexOf(index), 1)
            }
            break;
        }
      },
      //  人数选择
      confirm (value) {
        this.peopleNum = value;
        this.popupShow = false;
      },
      //  跳转住改非/地图定位
      jumpZGFList (id) {
        this.Save();
        switch (id) {
          case 1:
            this.$router.push({
              path: '/ordinary_inspection/ZGFList'
            })
            break;
          case 2:
            let data = {
              address: this.communityMap !== null ? this.communityMap.address : '',
              jwd: this.communityMap !== null ? `${this.communityMap.jd},${this.communityMap.wd}` : ''
            };
            localStorage.setItem('MapPosObj',JSON.stringify(data));
            this.$router.push({
              path: '/ordinary_inspection/MapPosS'
            })
            break;
        }
      },
      //  返回上一页
      clickBack(){
        this.$yy.stop();
        this.$router.back();
      },
      //  查询类别TK
      queryDetails () {
        let that = this;
        const noeId = that.$route.query;
        that.axios.get(`${that.$global_msg.Url.host}/partroInspection/generalCategory`).then(res => {
          this.tkList = res.data.rows;
          if (noeId.id !== undefined) {
            that.query(noeId.id, res.data.rows);
          }
        }).catch( e => terminal._error(e));
      },
      // 人员渲染
      changePop (data) {
        let arr = [];
        let arrs = [];
        let arrss = [];
        let that = this;
        data.map((item) => {
          if (0 === item.level && Number(that.userId) !== item.userId) {
            let a = `${item.levelId},,,${item.level},,,${item.name},,,${item.lev},,,${item.userId}`;
            that.commonPersonnel.push(a)
            that.personnel.push(item.userId);
            if (item.lev !== 0 || item.lev == null) {
              arr.push(item.name)
            }
          }
          if (1 === item.level && Number(that.userId) !== item.userId) {
            let a = `${item.levelId},,,${item.level},,,${item.name},,,${item.lev},,,${item.userId}`;
            that.commonPersonnel.push(a)
            that.personnel.push(item.userId);
            if (item.lev !== 0 || item.lev == null) {
              arrs.push(item.name);
            }
          }
          if (2 === item.level && Number(that.userId) !== item.userId) {
            let a = `${item.levelId},,,${item.level},,,${item.name},,,${item.lev},,,${item.userId}`;
            that.commonPersonnel.push(a)
            that.personnel.push(item.userId);
            arrss.push(item.name);
          }
        })
        that.Districts = arr.toString();
        that.Streets = arrs.toString();
        that.communitys = arrss.toString();
        that.District = arr;
        that.Street = arrs;
        that.community = arrss;
      },
      // 任务渲染
      changeTask (data) {
        let that = this;
        let taskName = '';
        let taskNames = [];
        let task = [];
        data.taskName.map(item => {
          that.zhuanname += item.taskName + ',';
          item.child.map(items => {
            taskNames.push(items.id)
            that.juname += items.concretenessName + ',';
          })
          task.push(`${item.theNewTaskAssignId},,${taskNames.toString()}`)
          taskNames = []
        })
        that.zhuanname = that.zhuanname.substring(0, this.zhuanname.length - 1)
        that.juname = that.juname.substring(0, this.juname.length - 1)
        console.log(task)
        console.log(taskNames)
      },
      query (id, dataList) {
        let that = this;
        let params = {
          noweInfoId: id,
          userId: this.userId
        }
        that.axios.get(`${that.$global_msg.Url.host}/partroInspection/generyDec`,
          { params }).then(res => {
          let data = res.data.rows;
          if(data.contract !== ''){
            $(".ly_play").attr("data-url", that.show_path + data.contract)
            $(".ly_start").hide(); //隐藏录音按钮
            $(".ly_play").show(); //显示录音播放
            $(".zhuan").addClass('yc')
          }
          if (data.imgurl !== '') {
            data.imgurl.split(',').map(res => {
              this.list_img.push({
                imgs: res
              })
            })
          }
          if (data.videourl !== '') {
            let a = data.videourl.split(',');
            a.map(res => {
              this.list_mv.push({
                video: res
              })
            })
          }
          that.changeTask(data);
          that.changePop(data.person);
          that.txtbxnr = data.title;
          that.NewInfoId = that.$route.query.id;
          that.contractime = data.contractime;
          that.communityName = data.jcdx;
          console.log(that.peopleNum);
          if (data.persons === 1) {
            that.peopleNum = null;
          } else {
            that.peopleNum = data.persons - 1;
          }
          console.log(that.peopleNum);
          that.checkItem = data.jcxId.split(',').map(Number);
          if (data.yhlb) {
            that.hiddenDanger = data.yhlb === '隐患' ? 1 : 99;
          }
          dataList.map((item, index) => {
            if (item.id === data.typeBId) {
              that.tkId = index;
              item.childA.map((items, indexs) => {
                if (items.id === data.typeAId) {
                  that.tkIds = indexs
                }
              })
            }
          })
          if (data.zgfid !== '' && data.zgfid !== undefined) {
            this.communityData = {
              nameId: data.xqId,
              communityIdList: data.zgfid.split(','),
              communityNameList: data.jcdx.split(',')
            };
          }
          if (data.jwd !== '' && data.jwd !== undefined) {
            this.communityMap = {
              jd: data.jwd.split(',')[0],
              wd: data.jwd.split(',')[1],
              name: data.jcdx
            }
          }
          this.tkCategory = {
            name: `${data.typeB}-${data.typeA}`,
            id: data.typeBId,
            ids: data.typeAId,
            tkListB: this.tkList[this.tkId].childA[this.tkIds].childB
          }
        }).catch( e => terminal._error(e));
      },
      //  语音
      ly() {
        let that = this;
        if (that.terminal !== true) {
          $(".yuyin_list").hide(); //隐藏录音按钮
        }
        this.$yy.ly_fun({
          play_img: require("@/assets/images/play.png"),
          playing_img: require("@/assets/images/play_dt.gif"),
          _this: this
        }, function (res) {
          that.txtbxnr += res
          if (that.txtbxnr.length >= 500) {
            // that.txtbxnr=res
            return that.$toast('文字限制在500字以内!')
          }
        });
      },
      //  删除录音
      clickDelete () {
        const that = this;
        const params = {
          patrolTroubleshoot: that.patrolId,
          patrolTroubleshootInfoId: that.id,
          deleteUrl: this.details.contract
        }
        if (this.details.contract !== '') {
          that.axios.get(`${that.$global_msg.Url.host}/partroInspection/deleteVoice`,
            { params }).then(res => {
          }).catch( e => terminal._error(e));
        }
      },
      //  提交/验证
      submit () {
        let that = this;
        console.log(this.$refs.button.style.pointerEvents)
        console.log(this.$refs.button.style.pointerEvents)
        if (that.txtbxnr !== '' && that.tkCategory.name !== '') {
          this.upData();
        } else {
          that.show = true;
          that.names = '请选择类别且输入描述内容';
        }
      },
      upData () {
        let that = this;
        terminal.Start();
        this.$refs.button.style.pointerEvents = 'none';
        let task = plus.uploader.createUpload(`${that.$global_msg.Url.host}/partroInspection/saveGeneryXunCha`,
          { method: 'POST' }, (data, status) => {
            if (status === 200) {
              if (JSON.parse(data.responseText).code === 200) {
                localStorage.setItem('responseText', JSON.parse(data.responseText).rows)
                this.NewInfoId = JSON.parse(data.responseText).rows
                this.$router.push({
                  path: '/ordinary_inspection/signatureBeList'
                })
                this.$yy.stop();
              } else {
                this.$yy.stop();
                Toast('上传失败！')
              }
            }
            terminal.end();
            this.$refs.button.style.pointerEvents = 'auto';
          }
        );
        let img = [];
        that.list_img.map(item => {
          img.push(item.imgs)
        })
        let video = [];
        that.list_mv.map(item => {
          video.push(item.video)
        })
        let peopleNumS = that.peopleNum ? Number(that.peopleNum) + 1 : 1
        console.log(that.peopleNum)
        console.log(that.peopleNum ? Number(that.peopleNum) + 1 : 1)
        task.addData('type', that.tkCategory.ids + '');
        task.addData('jcx', that.checkItem.toString() + '');
        task.addData('yhlb', that.hiddenDanger + '');
        task.addData('peopleNum', peopleNumS + '');
        task.addData('jcdx', that.communityName + '');
        task.addData('task', that.renwuchuan + '');
        task.addData('userInfoVos', that.commonPersonnel.concat(that.commonPersonnelText).join(':') + '');
        if (that.communityMap !== null) {
          task.addData('jwd', `${that.communityMap.jd},${that.communityMap.wd}` + '');
        }
        task.addData('title', that.txtbxnr + '');
        task.addData('contractime', $('.ly_s').html() + '');
        if (JSON.parse(localStorage.getItem('ordinary_inspection'))) {
          task.addFile(JSON.parse(localStorage.getItem('ordinary_inspection')).dataUrl, { key: 'multipartFile' });
        } else {
          task.addFile($(".ly_play").attr('data-url'), { key: 'multipartFile' });
        }
        task.addData('imgUrl', img.toString() + '');
        task.addData('videoUrl', video.toString() + '');
        task.addData('imgContent', that.imgText.toString() + '');
        task.addData('userId', that.userId + ''); //  用户id
        if (JSON.stringify(that.communityData).length > 2) {
          task.addData('xqId', Number(that.communityData.nameId) + '');
          task.addData('zgfId', that.communityData.communityIdList.toString() + '');  //  选择住改非id
        }
        if (that.NewInfoId !== 0) {
          task.addData('noweInfoId', Number(that.NewInfoId) + ''); //  修改判定
        }
        task.start();
      },
      //  下拉框显示
      showPop() {
        this.btm_show = true
      },
      //  拍照
      pz() {
        let that = this;
        that.btm_show = false;
        upload.paizhao(function (path) {
          that.uploadImg(path);
        }, function (msg) {
          if (msg !== 'resultCode is wrong') {
            that.$toast(msg);
          }
        });
      },
      //  相册
      xc() {
        let that = this;
        that.btm_show = false;
        upload.xiangce('image', true, function (path) {
          path.map(res => {
            that.uploadImg(res);
          })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            that.$toast(msg);
          }
        });
      },
      //  上传图片
      uploadImg(path) {
        let that = this;
        terminal.Start();
        let params = {};
        upload.uploadImg(that.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path, 'multipartFile', function (data) {
          if (data.code == 200) {
            that.list_img.push({
              imgs: data.rows
            })
          } else {
            that.$toast(data.msg);
          }
        }, function (msg) {
          that.$toast(msg);
        });
        terminal.end();
      },
      //  视频
      sp() {
        let that = this;
        that.btm_show = false;
        upload.record(function(path){
          // let a = Array.from(path)
          //获取视频信息
          // a.map(res => {
          plus.io.getVideoInfo({
            filePath:path,
            success:function(data){
              //视频时间15秒以内才上传
              if((data.duration*1)>11){
                that.$toast('上传的视频时间请在10秒以内');
                return;
              }else{
                that.uploadVideo(path);
              }
            },
            fail:function(e){
              that.$toast(e.msg + '1111111');
            }
          });
          // })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            that.$toast(msg);
          }
        });
      },
      //  上传视频
      uploadVideo(path) {
        let that = this;
        terminal.Start();
        let params = {};
        upload.uploadVideo(that.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path, 'multipartFile', function (data) {
          data = JSON.parse(data);
          if (data.code == 200) {
            that.list_mv.push({
              video: data.rows
            });
          } else {
            that.$toast(data.msg);
          }
        }, function (msg) {
          that.$toast(msg);
        });
        terminal.end();
      },
      //  显示图片描述
      showDesc(i) {
        this.list_img[i].showDesc = !this.list_img[i].showDesc;
        this.$forceUpdate();
      },
      //  删除图片
      del(i, type) {
        if (type == 'img') {
          if (this.list_img[i].id) {//不是新上传的图片
            this.delImg.push(this.list_img[i].id);
            this.list_img.splice(i, 1);
            this.imgText.splice(i, 1);
          } else {
            this.list_img.splice(i, 1);
            this.imgText.splice(i, 1);
          }
        } else {
          if (this.list_mv[i].id) {//不是新上传的视频
            this.delMv.push(this.list_mv[i].id);
            this.list_mv.splice(i, 1);
          } else {
            this.list_mv.splice(i, 1);
          }
        }
      },
    }
  }
</script>
<style>
  #van-datetime-picker>div {
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
  }
  #van-datetime-picker>div>div {
    font-size: 0.3888888888888889rem;
  }
  #van-datetime-picker>div>button {
    padding: 0 50px;
    font-size: 0.3888888888888889rem;
  }
</style>
<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .btn-search img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .menPhis-main {
    padding-top: 1.85rem;
    background-color: #fff;
  }
  .men-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border-bottom: 1Px solid #f2f2f2;
  }
  .img {
    width: 0.6rem;
    height: auto;
  }
  .titles-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    top: 0;
    left: 0;
    z-index: 999;
  }
  .titles-box {
    position: fixed;
    right: 0.462963rem;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-direction: column;*/
    border-radius: 0.185185rem;
    background-color: #ffffff;
    max-height: 5.5rem;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    left: 50%;
    width: 75%;
    padding: 0.4rem 0;
  }
  .title-left {
    overflow-y: auto;
    max-height: 4.5rem;
    width: 40%;
    border-right: 1Px solid #ddd;
  }
  .title-right {
    overflow-y: auto;
    max-height: 4.5rem;
  }
  .titles-box-cont {
    padding: 30px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hiddenDanger {
    background-color: #2B6CFE !important;
    color: #fff;
  }
</style>
<style scoped>
  .detail-clr {
    background-color: #ffffff;
  }
  .men-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.462963rem 0.37037rem;
    border-bottom: 1Px solid #f2f2f2;
  }
  .men-boxs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.162963rem 0.37037rem;
    border-bottom: 1Px solid #f2f2f2;
  }
  .men-boxs-data {
    background-color: #f2f2f2;
    margin: 0.1rem;
    padding: 0.185185rem 0.4rem;
    border-radius: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .list-box {
    display: flex;
    align-items: center;
    white-space: normal;
  }
  .dian {
    word-break: keep-all;
  }
  /* 视频列表 */
  .video-list{
    padding-top: 0.259259rem;
    margin-bottom:0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #f2f2f2 solid;
  }
  .video-list video{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }
  .video-list video:first-child{
    margin-top: 0;
  }
  .video-list .del{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }
  .video-list .del img{
    width: 100%;
    height: 100%;
  }
  .tk-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 0;
  }
  .shangc{
    width: 80%;
    margin-bottom: 40px;
  }
  .queding{
    width: 30%;
    color: white;
    text-align: center;
    background-color:#2B6CFE;
    border-radius: 0.092592rem;
    padding: 20px 0;
  }
  .tishi{
    border-bottom:0.018518rem solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
  }
  .tishi img{
    width: 0.4rem;
  }
  .conte{
    width: 70%;
    background: #FFFFFF;
    border-radius: 0.185185rem;
  }
  .tanbox{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .boxitem {
    /* height: 1.3889rem; */
    padding: 0px 0.3704rem;
    font-size: 0.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    overflow: hidden;
  }
  .boxitem textarea {
    width: 100%;
    padding-top: 0.3704rem;
    height: 3.125rem;
    overflow: hidden;
  }
  .popup-box {
    padding: 10px;
  }
  .popup-boxs {
    padding: 0 10px 10px;
  }
  .van-popup {
    background-color: transparent;
  }
  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }
  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
  }
  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }
  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }
  .leib_jdh {
    background: #EEEEEE;
    border-radius: 0.5rem;
    padding: 0.2rem 0.4rem;
    width: 20%;
    margin-bottom: 0.3rem;
    text-align: center;
  }
  .active {
    background-color: #2682FD;
    color: white;
  }
  .leib_choos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem 0;
    border-bottom: 1px solid #f2f2f2;
  }
  .leibie {
    background: white;
  }
  .picture {
    background: #EEF3F7;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 3rem;
    width: 50%;
    margin: 0 20px;
    border-radius: 0.2rem;
  }
  .picture img {
    width: 1rem;
    margin-bottom: 0.3rem;
  }
  .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    width: 4rem;
    border: 1px solid #F7F7F9;
    color: #5F5D5C;
    margin: 0.3rem;
  }
  .voice img {
    margin-right: 0.2rem;
    width: 0.4rem;
  }
  .words {
    height: 4rem;
    width: 100%;
    border-bottom: 0.037037rem solid #F7F7F9;
  }
  .textarea {
    /* border: 1px solid red; */
    height: 3.5rem;
    width: 100%;
    text-indent: 0.3rem;
    padding: 10px 0
  }
  .xuncont {
    width: 100%;
    border-bottom: 0.037037rem solid #f2f2f2;
    padding: 30px 0.3rem;
    box-sizing: border-box;
  }
  .security {
    background-color: #FFFFFF;
    border-radius: 0.092592rem;
  }
  .button {
    width: 100%;
    height: 1rem;
    color: white;
    text-align: center;
    line-height: 1rem;
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }
  .contant {
    border: 1px solid white;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  /* 图片列表 */
  .img-box {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }
  .img-box .img-item {
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url('../../../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }
  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }
  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
    object-fit: cover;
  }
  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }
  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }
  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }
  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }
  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }
  .img-box .show-desc .img-desc {
    display: block;
  }
  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .img-list:first-child {
    margin-left: 4.814814rem;
  }
  .imgs_ul {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }
  .img_upload .img-item {
    z-index: 3 !important;
  }
  .yuyin_list {
    width: 100%;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    border-bottom: 1Px solid #f2f2f2;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .ly {
    width: 3.0185185185185186rem;
    height: 1rem;
    border: 1Px solid #f2f2f2;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    /* justify-content: center; */
  }
  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    /* margin-right: 0.2777777777777778rem; */
  }
  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }
  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }
  .del_ly,
  .zhuan {
    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }
  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }
  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }
  .yc {
    display: none;
  }
  .ly_play>div {
    display: flex;
  }
  .ly_play {
    display: none;
  }
  .men-title-space {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
<style scoped>
  .cesjiedao {
    width: 25%;
    border-bottom: 1px solid #f2f2f2;
    height: 1.388888rem;
    display: inline-block;
    line-height: 1.388888rem;
    text-align: center;
    overflow: hidden;
  }
  .personum {
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
  }
  .input {
    width: 100%;
    text-align: center;
    margin-left: -12px;
  }
  .personum input {
    width: 50%;
  }
  .tan_title{
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
  }
  .tan_title img{
    width: 0.4rem;
  }
  .actives{
    color:#2b6cfe;
  }
  .van-popup {
    border-radius: 0.18rem;
    padding: 0 0.2rem;
    background-color: #fff;
  }
  .van-popups {
    width: 80%;
  }
  .contt1 {
    width: 100%;
  }
  .main {
    max-height: 6.944444rem;
    overflow-y: scroll;
  }
  .tanlist {
    display: flex;
    align-items: center;
    padding: 0.3rem;
    border-bottom: 1px solid #ddd;
  }
  .jtrw > div {
    padding: 0.3rem 1rem;
  }
  .tanchild {
    padding: 0 1rem;
  }
  .tanyes {
    color: white;
    background-color: #2b6cfe;
    width: 2.5rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    margin: 0.3rem auto;
    border-radius: 0.1rem;
  }
  .dply {
    display: none;
  }
  .imgs {
    width: 50px;
    height: 50px;
  }
</style>
